<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>jQuery Tutorial - Pop-up div on hover</title>
    <style type="text/css">
      body {
        margin: 0;
        padding: 0;
        font-family: Arial, Helvetica, sans-serif;
        color: #dddddd;
      }
      
      h1, h3 {
        margin: 0;
        padding: 0;
        font-weight: normal;
      }
      
      a {
        color: #EB067B;
      }
      
      div#container {
        width: 580px;
        margin: 100px auto 0 auto;
        padding: 20px;
        background: #000;
        border: 1px solid #1a1a1a;
      }
      
      /* HOVER STYLES */
      div#pop-up {
        display: none;
        position: absolute;
        width: 280px;
        padding: 10px;
        background: #eeeeee;
        color: #000000;
        border: 1px solid #1a1a1a;
        font-size: 90%;
      }
    </style>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
    <script type="text/javascript">
      $(function() {
        var moveLeft = 20;
        var moveDown = 10;
        
        $('a#trigger').hover(function(e) {
          $('div#pop-up').show()
            .css('top', e.pageY + moveDown)
            .css('left', e.pageX + moveLeft)
            .appendTo('body');
        }, function() {
            setTimeout(function() { $('div#pop-up').hide(); }, 5000);
        });
        
      });
    </script>
  </head>
  <body>
    <div id="container">
      <h1>jQuery Tutorial - Pop-up div on hover</h1>
      <p>
        To show hidden div, simply hover your mouse over
        <a href="#" id="trigger">this link</a>.
      </p>
      
      <!-- HIDDEN / POP-UP DIV -->
      <div id="pop-up">
        <h3>Pop-up div Successfully Displayed</h3>
        <p>
          This div only appears when the trigger link is hovered over. Otherwise
          it is hidden from view.<br/>
          <a href="anotherPage">This is a link you can select.</a>
        </p>
      </div>
      
    </div>
  </body>
</html>